<template>
	<view class="datetime-picker">
		<view class="mask" :class="{ show: open }" @touchmove.stop.prevent catchtouchmove="true"></view>
		<view class="wrap" :class="{ show: open }">
			<view class="picker-header" @touchmove.stop.prevent catchtouchmove="true">
				<view class="btn-picker cancel" @click="open = false">取消</view>
				<view class="btn-picker submit" @click="bindSubmitTap">确定</view>
			</view>
			<view class="picker-body">
				<picker-view :value="value" @change="bindCustomPickerChange" >
					<picker-view-column>
						<view class="column-item" v-for="item in years" :key="item">
							{{ item + "年" }}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="column-item" v-for="item in months" :key="item">
							{{ formatNum(item) + "月" }}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="column-item" v-for="item in days" :key="item">
							{{ formatNum(item) + "日" }}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="column-item" v-for="item in hours" :key="item">
							{{ formatNum(item) + "时" }}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="column-item" v-for="item in minutes" :key="item">
							{{ formatNum(item) + "分" }}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			startYear: {
				type: Number,
				default: new Date().getUTCFullYear(),
			},
			endYear: {
				type: Number,
				default: 2040,
			},
			currentTime: {
				type: String,
				default: ''
			}
		},
		data() {
			let date = new Date(),
				years = [],
				months = [],
				days = [], 
				hours = [],
				minutes = [];
			for (let year = this.startYear; year <= this.endYear; year++) {
				years.push(year);
			}
			for (let month = 1; month <= 12; month++) {
				months.push(month);
			}
			let totalDays = new Date(years[0], months[0], 0).getDate();
			for (let day = 1; day <= totalDays; day++) {
				days.push(day);
			}
			for (let hour = 0; hour <= 23; hour++) {
				hours.push(hour);
			}
			for (let minute = 0; minute < 60; minute++) {
				minutes.push(minute);
			}
			
			return {
				open: false,
				years: years,
				months: months,
				days: days,
				hours: hours,
				minutes: minutes,
				year: "",
				month: "",
				day: "",
				hour: "",
				minute: "",
				value: [0, 0, 0, 0, 0],
			};
		},
		mounted() {
			this.initSelectTimeHandle();
		},
		methods: {
			initSelectTimeHandle(){
				let currentDateTime = this.currentTime ? new Date(this.currentTime) : new Date();
				let	dateObject = {
					getFullYear: currentDateTime.getFullYear(),
					getMonth: currentDateTime.getMonth() + 1,
					getDate: currentDateTime.getDate(),
					getHours: currentDateTime.getHours(),
					getMinutes: currentDateTime.getMinutes()
				};
				let currentIndex = [];
				currentIndex[0] = this.years.indexOf(dateObject.getFullYear);
				currentIndex[1] = this.months.indexOf(dateObject.getMonth);
				currentIndex[2] = this.days.indexOf(dateObject.getDate);
				currentIndex[3] = this.hours.indexOf(dateObject.getHours);
				currentIndex[4] = this.minutes.indexOf(dateObject.getMinutes);
				Object.assign(this.value, {}, currentIndex);
				this.setSelectValue();
			},
			show() {
				this.open = true;
			},
			hide() {
				this.open = false;
			},
			bindCustomPickerChange(e) {
				this.value = e.detail.value;
				this.setSelectValue();
			},
			setSelectValue() {
				let changeValueArray = this.value;
				this.year = this.years[changeValueArray[0]];
				this.month = this.months[changeValueArray[1]];
				this.day = this.days[changeValueArray[2]];
				this.hour = this.hours[changeValueArray[3]];
				this.minute = this.minutes[changeValueArray[4]];
				
			},
			bindSubmitTap() {
				const {year,month,day,hour,minute,formatNum} = this;
				const result = {
					year: formatNum(year),
					month: formatNum(month),
					day: formatNum(day),
					hour: formatNum(hour),
					minute: formatNum(minute),
				};
				this.$emit("submit", result);
				this.hide();
			},
			formatNum(num) {
				return num < 10 ? "0" + num : num + "";
			},
		},
	};
</script>

<style lang="scss">
	$transition: all 0.3s ease;
	$primary: #488ee9;

	.datetime-picker {
		position: relative;
		z-index: 999;
		picker-view {
			height: 100%;
			picker-view-column {
				&:first-child {
					padding-left: 30rpx;
				}

				&:last-child {
					padding-right: 30rpx;
				}
			}
		}
		.mask {
			position: fixed;
			z-index: 1000;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.6);
			visibility: hidden;
			opacity: 0;
			transition: $transition;
			&.show {
				visibility: visible;
				opacity: 1;
			}
		}
		.wrap {
			z-index: 1001;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			transition: $transition;
			transform: translateY(100%);
			&.show {
				transform: translateY(0);
			}
		}
		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 10rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.picker-body {
			width: 100%;
			height: 460rpx;
			overflow: hidden;
			background-color: #fff;
			box-sizing: border-box;

		}

		.column-item {
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 24rpx;
			color: #999;
		}

		.btn-picker {
			position: relative;
			display: inline-block;
			padding: 0 10px;
			box-sizing: border-box;
			text-align: center;
			text-decoration: none;
			-webkit-tap-highlight-color: transparent;
			overflow: hidden;
			font-size: 30x;
			color: #999;
			cursor: pointer;
		}

		.btn-picker.submit {
			color: $primary;
		}
	}
</style>
